<template>
  <div class="problem_list">
    <van-tabs @change="tabsChange" v-model="active">
      <van-tab title="未处理" name="0"> </van-tab>
      <van-tab title="已处理" name="1"> </van-tab>
    </van-tabs>
    <div class="line"></div>
    <div class="card_wrapper">
      <div class="card_item" v-for="item in cardList" :key="item.id">
        <apply-card :item="item" v-bind="params" />
      </div>
    </div>
  </div>
</template>

<script>
import ApplyCard from '@/components/apply-card'
import API from '@/services'

import { Bus } from '@/utils/eventBus'
export default {
	data() {
		return {
			active: 0,
			cardList: [],
			params: {
				type: '0',
				status: '0',
			},
		}
	},
	components: { ApplyCard },
	methods: {
		async initProblemList(title) {
			const result = await API.getProblemList({
				params: { ...this.params, title },
				
			})
			this.cardList = result
		},

		tabsChange(e) {
			this.params.status = e
			this.initProblemList()
		},
	},
	created() {
		this.params.type = this.$route.query.type
		this.initProblemList()

		Bus.$on('searchConfirm', (e) => {
			this.initProblemList(e)
		})
	},

	destroyed() {
		Bus.$off('searchConfirm')
	},
	computed: {
		// inputVal() {
		// 	return this.$store.getters.inputValue
		// },
	},
}
</script>

<style lang="scss"  scoped>
.problem_list {
  padding-left: 0;
  padding-right: 0;
}

.line {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
}

.card_wrapper {
  //   background-color: #f5f5f5;

  margin: 16px;
  .card_item {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
